<template>
	<view class="reg">
	
		<view class="info">

			<view class="form-group">
				<view class="iconfont icon-shoujihao"></view>
				<input  type="number" :disabled="type == 'pay'?true:false" v-model="phone" placeholder="请输入手机号">
			</view>
			<view class="form-group verify">
				<view class="iconfont icon-yanzhengma"></view>
				<input  type="number" v-model="code" placeholder="请输入验证码">
				<view class="get-code" :class="sendStatus?'disabled':''" @tap="sendCode()">{{verifyText}}</view>
			</view>
			<block v-if="type == 'pay'">
				<view class="form-group">
					<view class="iconfont icon-mima"></view>
					<input type="number" password="true" v-model="password" placeholder="请设置新密码">
				</view>
				<view class="form-group">
					<view class="iconfont icon-mima"></view>
					<input type="number" v-model="confirm_password" password="true" placeholder="请输入确认密码">
				</view>
			</block>
			
			<block v-else>
				<view class="form-group">
					<view class="iconfont icon-mima"></view>
					<input type="text" password="true" v-model="password" placeholder="请设置新密码">
				</view>
				<view class="form-group">
					<view class="iconfont icon-mima"></view>
					<input type="text" v-model="confirm_password" password="true" placeholder="请输入确认密码">
				</view>
				
			</block>
			
			<view class="btn reg-btn" @tap="reg()">确定</view>
			
			
		</view>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	
	export default {
		data() {
			return {
				type: 'password',
				verifyText: '获取验证码',
				sendStatus: false,
				leftTime: 60,
				phone: '',
				code: '',
				password:'',
				confirm_password: '',
				
			};
		},
		onLoad(e) {
			this.appName = Request.appName;	
			if(e.type) {
				this.type = e.type;
			}
			
			if(this.type == 'pay') {
				this.phone = uni.getStorageSync('userinfo').mobile;
			}
		},
		methods: {
			//发送验证码
			sendCode() {
				if(this.sendStatus == true){
					return;
				}

				var that = this;
				
				var preg = /^1\d{10}$/;
				if(!preg.test(this.phone)){
					Request.alert('手机号码格式不正确');return;
				}
					
				var params = {
					url: 'sms/send',
					data: {
						mobile: that.phone,
						event: 'resetpwd'
					},
					sCallback: function(){
						that.sendStatus = true;
						that.countdown();
						uni.showToast({
							title:'发送成功'
						})
					}
				}
				
				Request.send(params);
				
			},
			//验证码倒计时
			countdown: function(){
				var that = this;
				var time = 60;
				var start = setInterval(function(){
					time--;
					if(time <= 0){
						clearInterval(start);
						that.sendStatus = false;
						that.verifyText = '获取验证码';

					} else {
						that.verifyText = time+'s 后重发';
						
					}
				},1000);
			},
			//注册
			reg() {
				if(!this.phone){
					Request.alert('请输入手机号');return;
				}

				if(!this.code){
					Request.alert('请输入验证码');return;
				}

				if(!this.password) {
					Request.alert('登录密码不能为空');
					return;
				}

				if(!this.confirm_password){
					Request.alert('请输入确认密码');return;
				}

				if(this.password != this.confirm_password){
					Request.alert('两次密码不一致');return;
				}
				
				var passPreg = /\d{6}/;
				if(this.type == 'pay' && !passPreg.test(this.password)){
					Request.alert('支付密码为6位数字');return;
				}

				
				var that = this;

				var formData = {
					mobile: that.phone,
					code: that.code,
					password: that.password,
					
				};

				if(that.type == 'pay') {
					var url = 'user/resetPayPassword'
				} else {
					var url = 'user/resetpwd'
				}
				var params = {
					url: url,
					data: formData,
					sCallback: function(res) {
						Request.alert(res.msg, () => {
							uni.navigateBack({})
						})
						
					}
				}
				
				Request.send(params);
			}
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
	.reg{
		padding-top: 100upx;
	}
	
	.reg .info{
		padding: 0 40upx;
	}
	
	.reg .info .form-group{
		display: flex;
		border-bottom: 1upx solid #eee;
		align-items: center;
		height: 80upx;
		line-height: 80upx;
		
	}
	
	.reg .info .form-group .iconfont{
		font-size: 40upx;
		margin-right: 20upx;
	}
	
	.reg .info .form-group input{
		flex: 1;
		font-size: 28upx;
		height: 80upx;
		line-height: 80upx;
	}
	
	.reg .info .form-group uni-input input{

		height: 80upx;
		line-height: 80upx;

	}
	
	.reg .get-code{
		font-size: 24upx;
		color: #e60012;
		padding: 0 20upx;
		border-left: 1upx solid #eee;
	}
	
	.reg .get-code.disabled{
		color: #ccc;
	}
	.reg .btn{
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 28upx;
		margin-top: 40upx;
		border-radius: 40upx;
	}
	
	.reg .reg-btn{
		background: #E60012;
		color: #fff;
	}
	
	.reg .tips{
		font-size: 24upx;
		color: #666;
		display: flex;
		justify-content: center;
		margin-top: 20upx;
	}
	
	.reg .tips navigator{
		color: #E60012;
	}

</style>
